{% extends "datasets/dataset_base.html" %}
{% load i18n %}
{% load client_lib_tags %}

{% block title %}{{ layer.alternate }} — {{ block.super }}{% endblock %}

{% block body_class %}layers{% endblock %}

{% block body_outer %}
{% if error %}
<div class="alert alert-error">{{ error }}</div>
{% endif %}

<div class="page-header">
  <h2>{% trans "Manage Styles" %}</h2>
</div>
{% dataset_detail_url layer as dataset_url %}
<h4>{% blocktrans with dataset_title=layer.alternate  %}
      Manage Available Styles for <a href="{{ dataset_url }}">{{ dataset_title }}</a>
    {% endblocktrans %}</h4>
<form action="{% url "dataset_style_manage" layer.service_typename %}" method="POST">
  <div class="row grid-spacer">
    <fieldset>
      <div class="col-md-3">
        <h4>{% trans "Dataset Default Style" %}</h4>
      </div>
      <div class="col-md-6">
        <select id='default_style' name='default_style' required='required'>
          {% for style in dataset_styles %}
            {% if style.0 == layer.default_style.name or style.0 == layer.default_style.name or style.1 == layer.default_style.sld_title %}
            <option value="{{ style.0 }}" selected>{% if style.1 %}{{ style.1 }}{% else %}{{ style.0 }}{% endif %}</option>
            {% else %}
            <option value="{{ style.0 }}">{% if style.1 %}{{ style.1 }}{% else %}{{ style.0 }}{% endif %}</option>
            {% endif %}
          {% endfor %}
        </select>
      </div>
    </fieldset>
  </div>
  <div class="row grid-spacer">
    <fieldset>
      <div class="col-md-3">
        <h4>{% trans "Available styles" %}</h4>
        <p>{% trans "Click on an available style in the upper box to assign it to this layer. Selected styles appear in the lower box." %}</p>
      </div>

      <div class="col-md-9">
        <select multiple="multiple" id="style-select" name="style-select">
          {% for style in gs_styles %}
            {% if style.0 in dataset_style_names %}
            <option value='{{ style.0 }}' selected>{% if style.1 %}{{ style.1 }}{% else %}{{ style.0 }}{% endif %}</option>
            {% else %}
            <option value='{{ style.0 }}'>{% if style.1 %}{{ style.1 }}{% else %}{{ style.0 }}{% endif %}</option>
            {% endif %}
          {% endfor %}
        </select>
        {% csrf_token %}
        <input type="hidden" value="{{ layer.service_typename }}" />
      </div>
    </fieldset>
  </div>
  <div class="row grid-spacer">
    <div class="col-md-offset-3 col-md-6 form-actions">
      <input type="submit" value="{% trans "Update Available Styles" %}" class="btn btn-danger" />
    </div>
  </div>
</form>

{% endblock %}
{% block extra_script %}
{{ block.super }}
<script type="text/javascript">
  $(function () {
    $('#style-select').multiselect({
      includeSelectAllOption: false,
      buttonWidth: 550,
      enableFiltering: true,
      afterSelect: function(values){
          $("#style-select :selected").each(function() {
              if(this.value === values[0]) {
                  $('#default_style').append($("<option/>", {
                    value: this.value,
                    text: this.text
                  }));
              }
          });
      },
      afterDeselect: function(values){
        $('#default_style option').each(function() {
          if ( $(this).val() == values[0] ) {
            $(this).remove();
          }
        });
      }
    });

    $('.js-searchlist').on('keyup', function() {
      var searchString = $(this).val();
      $(".ms-elem-selectable:not(.ms-selected)").each(function() {
        var listElement = $(this);
        var styleName = $("span", listElement).html();
        if(styleName !=null)
          styleName.toUpperCase().indexOf(searchString.toUpperCase()) > -1 ? listElement.show() : listElement.hide();
      });
    });
  });
</script>
{% endblock %}
